@charset "UTF-8";
@component-namespace tmp{
  @b toggles {
    margin-top: var(--theme-margin-small);
    @e footer {
      border-top: solid 1px var(--theme-border-color-gray);
      height: 30px;
      box-sizing: border-box;
      background-color: var(--theme-background-color-primary);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-align: center;
      color: var(--theme-font-color-secondary);
      cursor: pointer;
      position: relative;

      i {
        font-size: 12px;
        line-height: 30px;
        transition: .3s;
    &.hovering {
       transform: translateX(-20px);
     }
    }
    span {
      position: absolute;
      transform: translateX(-10px);
      font-size: 12px;
      line-height: 30px;
      transition: .3s;
      display: inline-block;
    }

  &:hover {
     color: var(--theme-color-primary);
   }

  & .text-slide-enter,
  & .text-slide-leave-active {
      opacity: 0;
      transform: translateX(10px);
    }

  }
}
}
